//路径操作：node中用path
const path=require('path')
//在这个配置文件，起始就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象
const webpack=require('webpack')
//导入在内存生成html页面的插件。只要是插件，都一定要放到plugins中去
//这个插件的2个作用：1，自动在内存中根据指定页面生成一个内存的页面
//2，自动把打包好的bundle,js追加到页面中去
const htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:path.join(__dirname,'./src/index.js'),//入口，表示要使用webpack打包的哪个文件
    output:{//输出文件相关的配置
        path:path.join(__dirname,'./dist'),//指定打包好的文件输出到哪个目录中去
        filename:'main.js'//这是指定输出的文件的名称。"dev": "webpack --mode development", 
    //"build": "webpack --mode production" 

    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//指定模版页面，将来会根据指定的页面路径去生成内存中的页面
            filename:'index.html'//指定生成页面的名称
        })
    ],
    module:{//这个节点，用于配置所有第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test: /\.css$/, use:['style-loader','css-loader'] },
            //配置处理。css文件的第三方loader规则，loader规则是从右到左调用
//test后面的是要匹配的文件类型，这种文件类型由use来处理
            {test: /\.less$/, use:['style-loader','css-loader','less-loader'] },
//配置处理。less文件的第三方loader规则
            {test: /\.scss$/, use:['style-loader','css-loader','sass-loader'] },
            //配置处理。scss文件的第三方loader规则
        ]
    }
}
//思路：当我们在终端中直接输入webpack命令执行的时候，webpack做了以下几步：
//1，首先，webpack发现并没有通过命令的形式指定出口和入口文件。
//2，webpack就会去项目的根目录中查找一个叫做‘webpack。config,js’的配置文件
//3，当找到了webpack就会解析执行这个配置文件，当解析执行完了配置文件后，就得到了配置文件中导出的配置对象
//4，当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口文件，最后进行打包构建。
//5，但是每次都要手动打包，需求经常要变，于是我们可以使用webpack-dev-server-D  把这个工具，来实现自动打包的编译功能。
//6，方法：运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖